import {
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElRadioGroup,
  ElRadio,
  ElCheckboxGroup,
  ElCheckbox
} from 'element-plus'
import type { FieldType } from '../types'
import { defineComponent, type PropType } from 'vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  name: 'DefaultRenderer',
  props: {
    type: {
      type: String as () => FieldType,
      required: true
    },
    item: {
      type: Object,
      required: true
    },
    formData: {
      type: Object,
      required: true
    },
    prop: {
      type: String,
      required: true
    },
    options: {
      type: Array as PropType<Array<{ label: string; value: any }>>,
      default: () => []
    }
  },
  setup(props) {
    const { t } = useI18n()
    const { type, item, formData, prop, options } = props
    const render = () => {
      switch (type) {
        case 'select':
          return (
            <ElSelect
              v-model={formData[prop]}
              {...item.attrs}
              placeholder={t('tips.select') + ` ${item.label}`}
            >
              {options?.map(option => (
                <ElOption
                  key={option.value}
                  label={option.label}
                  value={option.value}
                />
              ))}
            </ElSelect>
          )
        case 'date':
          return <ElDatePicker v-model={formData[prop]} {...item.attrs} />
        case 'radio':
          return (
            <ElRadioGroup v-model={formData[prop]} {...item.attrs}>
              {options?.map(option => (
                <ElRadio key={option.value} value={option.value}>
                  {option.label}
                </ElRadio>
              ))}
            </ElRadioGroup>
          )
        case 'checkbox':
          return (
            <ElCheckboxGroup v-model={formData[prop]} {...item.attrs}>
              {options?.map(option => (
                <ElCheckbox key={option.value} label={option.value}>
                  {option.label}
                </ElCheckbox>
              ))}
            </ElCheckboxGroup>
          )
        default:
          return (
            <ElInput
              v-model={formData[prop]}
              {...item.attrs}
              placeholder={t('tips.enter') + ` ${item.label}`}
            />
          )
      }
    }

    return () => render()
  }
})
